<template>
  <div class="box">
    <div class="card" v-for="(item, index) in tableData" :key="index">
      <div class="LeftBox">
        <div class="mess1">
          <div class="mess2">账号</div>
          <div class="mess3">{{ item.account }}</div>
        </div>
        <div class="mess1">
          <div class="mess2">状态</div>
          <div class="mess3" style="color:red">{{ item.status }}</div>
        </div>
        <div class="mess1">
          <div class="mess2">资产总值</div>
          <div class="mess3">{{ towNumber(item.total_asset) }}</div>
        </div>
        <div class="mess1">
          <div class="mess2">证券市值</div>
          <div class="mess3">
            {{ towNumber(item.stock_value) }}
          </div>
        </div>
        <div class="mess1">
          <div class="mess2">可用资金</div>
          <div class="mess3">
            {{ towNumber(item.available) }}
          </div>
        </div>
      </div>
      <div class="RightBox">
        <div class="mess1">
          <div class="mess4">冻结资金</div>
          <div class="mess5" style="color:blue">
            {{ towNumber(item.frozen_cash) }}
          </div>
        </div>
        <div class="mess1">
          <div class="mess4">资金余额</div>
          <div class="mess5" style="color:red">
            {{ towNumber(item.balance) }}
          </div>
        </div>
        <div class="mess1">
          <div class="mess4">姓名</div>
          <div class="mess5">{{ item.account_name }}</div>
        </div>
        <div class="mess1">
          <div class="mess4">上海股东</div>
          <div class="mess5">{{ item.sh_holder_no }}</div>
        </div>
        <div class="mess1">
          <div class="mess4">深圳股东</div>
          <div class="mess5">
            {{ item.sz_holder_no }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {}
  },
  computed: {
    tableData() {
      return this.$store.state.data3
    }
  },
  methods: {
    back() {
      this.$router.push('/data1')
    },
    // 小数点后保留两位的函数
    towNumber(val) {
      return Number(val).toFixed(2)
    }
  }
}
</script>
<style Lang="less" scoped>
.box {
  display: flex;
  flex-direction: column;
  background-color: #0e0c22;
}
.card {
  margin: 30px 15px 0px 15px;
  background-color: #201e33;
  color: #ffffff;
  font-family: PingFang SC;
  margin-top: 0;
  margin-bottom: 10px;
  border-radius: 10px;
  display: flex;
  flex-direction: row;
}
.LeftBox {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  flex: 3;
}
.RightBox {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  flex: 4;
}
.mess1 {
  display: flex;
  flex-direction: row;
}
.mess2 {
  letter-spacing: 2px;
  font-size: 13px;
  font-family: PingFang-SC-Regular;
  margin: 6px 0 6px 10px;
  flex: 1;
}
.mess3 {
  font-size: 10px;
  margin: 6px -10px 6px 2px;
  flex: 1.2;
  display: flex;
  flex-direction: row;
}
.mess4 {
  letter-spacing: 2px;
  font-size: 13px;
  margin: 6px 0 6px 10px;
  flex: 1;
}
.mess5 {
  font-size: 10px;
  margin: 6px -10px 6px 2px;
  flex: 2;
  display: flex;
  flex-direction: row;
}
</style>
